<template>
  <div class="fraud-identification">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1>诈骗类型识别</h1>
      <p>智能识别诈骗模式，精准分类诈骗类型</p>
    </div>

    <!-- 快速识别 -->
    <div class="quick-identify">
      <h3>快速识别</h3>
      <div class="identify-tabs">
        <button v-for="tab in identifyTabs" :key="tab.id"
                @click="activeTab = tab.id"
                :class="{ active: activeTab === tab.id }"
                class="tab-btn">
          {{ tab.name }}
        </button>
      </div>

      <div class="identify-content">
        <!-- 文本识别 -->
        <div v-show="activeTab === 'text'" class="identify-panel">
          <div class="input-section">
            <textarea v-model="textInput" placeholder="输入可疑文本内容进行识别..." rows="6"></textarea>
            <div class="input-actions">
              <button @click="identifyText" :disabled="!textInput.trim()" class="identify-btn">
                <i class="icon">🔍</i>
                识别类型
              </button>
              <button @click="clearText" class="clear-btn">清空</button>
            </div>
          </div>
          
          <div v-if="textResult" class="result-section">
            <div class="result-header">
              <h4>识别结果</h4>
              <div class="confidence-score">置信度: {{ textResult.confidence }}%</div>
            </div>
            <div class="fraud-type" :class="textResult.type">
              <div class="type-icon">{{ getTypeIcon(textResult.type) }}</div>
              <div class="type-info">
                <h5>{{ textResult.typeName }}</h5>
                <p>{{ textResult.description }}</p>
              </div>
            </div>
            <div class="key-indicators">
              <h5>关键指标</h5>
              <div class="indicator-list">
                <span v-for="indicator in textResult.indicators" :key="indicator" class="indicator-tag">
                  {{ indicator }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 图像识别 -->
        <div v-show="activeTab === 'image'" class="identify-panel">
          <div class="upload-section">
            <div class="upload-zone" @dragover.prevent @drop="handleImageDrop">
              <input type="file" ref="imageInput" @change="handleImageUpload" accept="image/*" style="display: none;">
              <div class="upload-content">
                <i class="upload-icon">📁</i>
                <p>拖拽图片到此处或 <button @click="$refs.imageInput.click()">选择文件</button></p>
              </div>
            </div>
            <div v-if="uploadedImage" class="uploaded-image">
              <img :src="uploadedImage" alt="上传的图片">
              <button @click="identifyImage" class="identify-btn">识别诈骗特征</button>
            </div>
          </div>
        </div>

        <!-- 通话识别 -->
        <div v-show="activeTab === 'call'" class="identify-panel">
          <div class="call-info-form">
            <div class="form-group">
              <label>来电号码</label>
              <input type="text" v-model="callInfo.number" placeholder="请输入来电号码">
            </div>
            <div class="form-group">
              <label>通话时长</label>
              <input type="number" v-model="callInfo.duration" placeholder="分钟">
            </div>
            <div class="form-group">
              <label>对方身份声称</label>
              <select v-model="callInfo.identity">
                <option value="">请选择</option>
                <option value="bank">银行工作人员</option>
                <option value="police">公安机关</option>
                <option value="court">法院</option>
                <option value="company">快递/电商客服</option>
                <option value="government">政府部门</option>
                <option value="other">其他</option>
              </select>
            </div>
            <div class="form-group">
              <label>通话内容关键词</label>
              <textarea v-model="callInfo.keywords" placeholder="请输入通话中的关键词或短语..." rows="3"></textarea>
            </div>
            <button @click="identifyCall" :disabled="!callInfo.number" class="identify-btn">
              分析通话
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 诈骗类型库 -->
    <div class="fraud-types-library">
      <h3>诈骗类型库</h3>
      <div class="library-filters">
        <div class="filter-group">
          <label>分类筛选</label>
          <select v-model="selectedCategory">
            <option value="">全部分类</option>
            <option v-for="category in categories" :key="category.id" :value="category.id">
              {{ category.name }}
            </option>
          </select>
        </div>
        <div class="filter-group">
          <label>风险等级</label>
          <select v-model="selectedRisk">
            <option value="">全部等级</option>
            <option value="high">高风险</option>
            <option value="medium">中风险</option>
            <option value="low">低风险</option>
          </select>
        </div>
        <div class="search-group">
          <input type="text" v-model="searchKeyword" placeholder="搜索诈骗类型...">
          <button @click="searchFraudTypes" class="search-btn">搜索</button>
        </div>
      </div>

      <div class="fraud-types-grid">
        <div v-for="fraudType in filteredFraudTypes" :key="fraudType.id" class="fraud-type-card">
          <div class="card-header">
            <div class="type-icon">{{ fraudType.icon }}</div>
            <div class="type-name">{{ fraudType.name }}</div>
            <div class="risk-badge" :class="fraudType.risk">{{ fraudType.risk }}</div>
          </div>
          <div class="card-content">
            <p>{{ fraudType.description }}</p>
            <div class="type-stats">
              <div class="stat-item">
                <span class="stat-label">检出率</span>
                <span class="stat-value">{{ fraudType.detectionRate }}%</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">案例数</span>
                <span class="stat-value">{{ fraudType.caseCount }}</span>
              </div>
            </div>
          </div>
          <div class="card-actions">
            <button @click="viewDetails(fraudType)" class="detail-btn">查看详情</button>
            <button @click="reportCase(fraudType)" class="report-btn">举报案例</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 识别统计 -->
    <div class="identification-stats">
      <h3>识别统计</h3>
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-header">
            <h4>今日识别</h4>
            <i class="stat-icon">📊</i>
          </div>
          <div class="stat-value">{{ todayStats.total }}</div>
          <div class="stat-trend">
            <span class="trend-icon">📈</span>
            <span class="trend-text">较昨日 +{{ todayStats.growth }}%</span>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-header">
            <h4>高风险识别</h4>
            <i class="stat-icon">⚠️</i>
          </div>
          <div class="stat-value">{{ todayStats.highRisk }}</div>
          <div class="stat-trend">
            <span class="trend-icon">🚨</span>
            <span class="trend-text">需要关注</span>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-header">
            <h4>准确率</h4>
            <i class="stat-icon">🎯</i>
          </div>
          <div class="stat-value">{{ todayStats.accuracy }}%</div>
          <div class="stat-trend">
            <span class="trend-icon">✅</span>
            <span class="trend-text">识别精度</span>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-header">
            <h4>处理速度</h4>
            <i class="stat-icon">⚡</i>
          </div>
          <div class="stat-value">{{ todayStats.speed }}s</div>
          <div class="stat-trend">
            <span class="trend-icon">🔄</span>
            <span class="trend-text">平均用时</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新识别记录 -->
    <div class="recent-identifications">
      <h3>最新识别记录</h3>
      <div class="records-table">
        <div class="table-header">
          <div class="header-cell">时间</div>
          <div class="header-cell">类型</div>
          <div class="header-cell">识别结果</div>
          <div class="header-cell">置信度</div>
          <div class="header-cell">风险等级</div>
          <div class="header-cell">操作</div>
        </div>
        <div class="table-body">
          <div v-for="record in recentRecords" :key="record.id" class="table-row">
            <div class="table-cell">{{ record.time }}</div>
            <div class="table-cell">
              <span class="type-tag">{{ record.inputType }}</span>
            </div>
            <div class="table-cell">
              <div class="result-info">
                <span class="result-icon">{{ getTypeIcon(record.fraudType) }}</span>
                <span class="result-name">{{ record.fraudTypeName }}</span>
              </div>
            </div>
            <div class="table-cell">
              <div class="confidence-bar">
                <div class="bar-fill" :style="{ width: record.confidence + '%' }"></div>
                <span class="confidence-text">{{ record.confidence }}%</span>
              </div>
            </div>
            <div class="table-cell">
              <span class="risk-badge" :class="record.riskLevel">{{ record.riskLevel }}</span>
            </div>
            <div class="table-cell">
              <button @click="viewRecord(record)" class="view-record-btn">查看</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 诈骗趋势分析 -->
    <div class="fraud-trends">
      <h3>诈骗趋势分析</h3>
      <div class="trends-content">
        <div class="trend-chart">
          <canvas ref="trendChart" width="800" height="400"></canvas>
        </div>
        <div class="trend-insights">
          <h4>趋势洞察</h4>
          <div class="insight-list">
            <div v-for="insight in trendInsights" :key="insight.id" class="insight-item">
              <div class="insight-icon">{{ insight.icon }}</div>
              <div class="insight-content">
                <h5>{{ insight.title }}</h5>
                <p>{{ insight.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const activeTab = ref('text')
const textInput = ref('')
const textResult = ref(null)
const uploadedImage = ref(null)
const selectedCategory = ref('')
const selectedRisk = ref('')
const searchKeyword = ref('')

// 通话信息
const callInfo = ref({
  number: '',
  duration: '',
  identity: '',
  keywords: ''
})

// 识别标签页
const identifyTabs = ref([
  { id: 'text', name: '文本识别' },
  { id: 'image', name: '图像识别' },
  { id: 'call', name: '通话识别' }
])

// 诈骗类型分类
const categories = ref([
  { id: 'telecom', name: '电信诈骗' },
  { id: 'online', name: '网络诈骗' },
  { id: 'investment', name: '投资诈骗' },
  { id: 'job', name: '兼职诈骗' },
  { id: 'romance', name: '情感诈骗' },
  { id: 'others', name: '其他诈骗' }
])

// 诈骗类型库
const fraudTypes = ref([
  {
    id: 1,
    name: '冒充银行客服',
    icon: '🏦',
    category: 'telecom',
    risk: 'high',
    description: '冒充银行工作人员，声称账户异常需要验证',
    detectionRate: 92,
    caseCount: 1245
  },
  {
    id: 2,
    name: '虚假投资理财',
    icon: '💰',
    category: 'investment',
    risk: 'high',
    description: '承诺高收益低风险的投资项目',
    detectionRate: 87,
    caseCount: 856
  },
  {
    id: 3,
    name: '网络购物诈骗',
    icon: '🛒',
    category: 'online',
    risk: 'medium',
    description: '虚假商品或服务，要求预付款',
    detectionRate: 78,
    caseCount: 623
  },
  {
    id: 4,
    name: '兼职刷单',
    icon: '💻',
    category: 'job',
    risk: 'medium',
    description: '网络刷单兼职，承诺返还本金加佣金',
    detectionRate: 85,
    caseCount: 459
  },
  {
    id: 5,
    name: '情感交友诈骗',
    icon: '💕',
    category: 'romance',
    risk: 'high',
    description: '建立虚假恋爱关系，骗取金钱',
    detectionRate: 73,
    caseCount: 287
  },
  {
    id: 6,
    name: '冒充公检法',
    icon: '⚖️',
    category: 'telecom',
    risk: 'high',
    description: '冒充公安、检察院、法院工作人员',
    detectionRate: 94,
    caseCount: 1089
  }
])

// 统计数据
const todayStats = ref({
  total: 2847,
  highRisk: 392,
  accuracy: 91.5,
  speed: 1.2,
  growth: 15.3
})

// 最新识别记录
const recentRecords = ref([
  {
    id: 1,
    time: '14:25',
    inputType: '文本',
    fraudType: 'telecom',
    fraudTypeName: '冒充银行客服',
    confidence: 94,
    riskLevel: 'high'
  },
  {
    id: 2,
    time: '14:18',
    inputType: '通话',
    fraudType: 'investment',
    fraudTypeName: '虚假投资理财',
    confidence: 87,
    riskLevel: 'high'
  },
  {
    id: 3,
    time: '14:12',
    inputType: '图像',
    fraudType: 'online',
    fraudTypeName: '网络购物诈骗',
    confidence: 72,
    riskLevel: 'medium'
  },
  {
    id: 4,
    time: '14:05',
    inputType: '文本',
    fraudType: 'job',
    fraudTypeName: '兼职刷单',
    confidence: 89,
    riskLevel: 'medium'
  },
  {
    id: 5,
    time: '13:58',
    inputType: '通话',
    fraudType: 'telecom',
    fraudTypeName: '冒充公检法',
    confidence: 96,
    riskLevel: 'high'
  }
])

// 趋势洞察
const trendInsights = ref([
  {
    id: 1,
    icon: '📈',
    title: '电信诈骗增长明显',
    description: '本周电信诈骗案例较上周增长23%，主要集中在冒充银行客服'
  },
  {
    id: 2,
    icon: '🎯',
    title: '识别准确率提升',
    description: 'AI模型经过优化后，整体识别准确率提升至91.5%'
  },
  {
    id: 3,
    icon: '⚡',
    title: '处理速度优化',
    description: '平均识别时间缩短至1.2秒，用户体验显著改善'
  },
  {
    id: 4,
    icon: '🔍',
    title: '新型诈骗手法',
    description: '发现3种新的诈骗变种，已加入识别模型训练'
  }
])

// 计算属性
const filteredFraudTypes = computed(() => {
  let filtered = fraudTypes.value
  
  if (selectedCategory.value) {
    filtered = filtered.filter(type => type.category === selectedCategory.value)
  }
  
  if (selectedRisk.value) {
    filtered = filtered.filter(type => type.risk === selectedRisk.value)
  }
  
  if (searchKeyword.value) {
    filtered = filtered.filter(type => 
      type.name.includes(searchKeyword.value) || 
      type.description.includes(searchKeyword.value)
    )
  }
  
  return filtered
})

// 方法
const identifyText = () => {
  if (!textInput.value.trim()) return
  
  // 模拟文本识别
  const fraudTypeMap = {
    '银行': { type: 'telecom', typeName: '冒充银行客服' },
    '投资': { type: 'investment', typeName: '虚假投资理财' },
    '刷单': { type: 'job', typeName: '兼职刷单' },
    '购物': { type: 'online', typeName: '网络购物诈骗' },
    '公安': { type: 'telecom', typeName: '冒充公检法' }
  }
  
  let detectedType = { type: 'others', typeName: '其他诈骗' }
  for (const [keyword, type] of Object.entries(fraudTypeMap)) {
    if (textInput.value.includes(keyword)) {
      detectedType = type
      break
    }
  }
  
  textResult.value = {
    ...detectedType,
    confidence: Math.floor(Math.random() * 20) + 80,
    description: getTypeDescription(detectedType.type),
    indicators: ['敏感词汇', '时间紧迫', '金钱要求', '身份伪装']
  }
}

const clearText = () => {
  textInput.value = ''
  textResult.value = null
}

const handleImageUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      uploadedImage.value = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

const handleImageDrop = (event) => {
  event.preventDefault()
  const file = event.dataTransfer.files[0]
  if (file && file.type.startsWith('image/')) {
    const reader = new FileReader()
    reader.onload = (e) => {
      uploadedImage.value = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

const identifyImage = () => {
  console.log('识别图像诈骗特征')
  // 模拟图像识别逻辑
}

const identifyCall = () => {
  console.log('分析通话内容:', callInfo.value)
  // 模拟通话分析逻辑
}

const getTypeIcon = (type) => {
  const iconMap = {
    telecom: '📞',
    investment: '💰',
    online: '🛒',
    job: '💻',
    romance: '💕',
    others: '❓'
  }
  return iconMap[type] || '❓'
}

const getTypeDescription = (type) => {
  const descMap = {
    telecom: '通过电话或短信方式实施的诈骗',
    investment: '以投资理财为名义的诈骗',
    online: '通过网络平台实施的诈骗',
    job: '以兼职招聘为名义的诈骗',
    romance: '以恋爱交友为名义的诈骗',
    others: '其他类型的诈骗手法'
  }
  return descMap[type] || '未知类型'
}

const searchFraudTypes = () => {
  console.log('搜索诈骗类型:', searchKeyword.value)
}

const viewDetails = (fraudType) => {
  console.log('查看详情:', fraudType)
}

const reportCase = (fraudType) => {
  console.log('举报案例:', fraudType)
}

const viewRecord = (record) => {
  console.log('查看记录:', record)
}

onMounted(() => {
  drawTrendChart()
})

const drawTrendChart = () => {
  const canvas = document.querySelector('#trendChart')
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  const width = canvas.width
  const height = canvas.height
  
  // 清空画布
  ctx.clearRect(0, 0, width, height)
  
  // 绘制背景网格
  ctx.strokeStyle = '#f0f0f0'
  ctx.lineWidth = 1
  
  // 垂直线
  for (let i = 0; i <= 10; i++) {
    const x = (width / 10) * i
    ctx.beginPath()
    ctx.moveTo(x, 0)
    ctx.lineTo(x, height)
    ctx.stroke()
  }
  
  // 水平线
  for (let i = 0; i <= 8; i++) {
    const y = (height / 8) * i
    ctx.beginPath()
    ctx.moveTo(0, y)
    ctx.lineTo(width, y)
    ctx.stroke()
  }
  
  // 绘制数据线
  const dataPoints = [
    { x: 80, y: 320 },
    { x: 160, y: 300 },
    { x: 240, y: 280 },
    { x: 320, y: 260 },
    { x: 400, y: 240 },
    { x: 480, y: 220 },
    { x: 560, y: 200 },
    { x: 640, y: 180 },
    { x: 720, y: 160 }
  ]
  
  ctx.strokeStyle = '#1e3c72'
  ctx.lineWidth = 3
  ctx.beginPath()
  dataPoints.forEach((point, index) => {
    if (index === 0) {
      ctx.moveTo(point.x, point.y)
    } else {
      ctx.lineTo(point.x, point.y)
    }
  })
  ctx.stroke()
  
  // 绘制数据点
  dataPoints.forEach(point => {
    ctx.beginPath()
    ctx.arc(point.x, point.y, 6, 0, 2 * Math.PI)
    ctx.fillStyle = '#ff9800'
    ctx.fill()
  })
}
</script>

<style scoped>
.fraud-identification {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

.quick-identify {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.quick-identify h3 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.identify-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: white;
  color: #666;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn.active {
  background: #1e3c72;
  color: white;
  border-color: #1e3c72;
}

.identify-content {
  background: #f8f9ff;
  border-radius: 0 10px 10px 10px;
  padding: 20px;
  min-height: 300px;
}

.identify-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.input-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-section textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  resize: vertical;
}

.input-actions {
  display: flex;
  gap: 10px;
}

.identify-btn {
  background: #1e3c72;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.identify-btn:hover:not(:disabled) {
  background: #2a5298;
}

.identify-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.clear-btn {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-btn:hover {
  background: #e8e8e8;
}

.result-section {
  background: white;
  border-radius: 8px;
  padding: 15px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.result-header h4 {
  color: #333;
  margin: 0;
}

.confidence-score {
  font-size: 14px;
  color: #1e3c72;
  font-weight: bold;
}

.fraud-type {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f8f9ff;
  border-radius: 8px;
  margin-bottom: 15px;
}

.type-icon {
  font-size: 32px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.type-info h5 {
  color: #333;
  margin: 0 0 5px 0;
}

.type-info p {
  color: #666;
  margin: 0;
  font-size: 14px;
}

.key-indicators h5 {
  color: #333;
  margin: 0 0 10px 0;
}

.indicator-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.indicator-tag {
  background: #1e3c72;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.upload-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.upload-zone {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-zone:hover {
  border-color: #1e3c72;
  background: #f8f9ff;
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.upload-icon {
  font-size: 48px;
  color: #666;
}

.upload-content p {
  color: #666;
  margin: 0;
}

.upload-content button {
  background: #1e3c72;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.uploaded-image {
  text-align: center;
}

.uploaded-image img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.call-info-form {
  display: grid;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

.fraud-types-library {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.fraud-types-library h3 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.library-filters {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-group label {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.filter-group select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.search-group {
  display: flex;
  gap: 10px;
}

.search-group input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  min-width: 200px;
}

.search-btn {
  background: #1e3c72;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-btn:hover {
  background: #2a5298;
}

.fraud-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.fraud-type-card {
  background: #f8f9ff;
  border-radius: 8px;
  padding: 20px;
  border-left: 4px solid #1e3c72;
  transition: transform 0.3s ease;
}

.fraud-type-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.card-header .type-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.type-name {
  flex: 1;
  font-weight: bold;
  color: #333;
}

.risk-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.risk-badge.high {
  background: #ffebee;
  color: #f44336;
}

.risk-badge.medium {
  background: #fff3e0;
  color: #ff9800;
}

.risk-badge.low {
  background: #e8f5e8;
  color: #4caf50;
}

.card-content p {
  color: #666;
  margin: 0 0 15px 0;
  font-size: 14px;
}

.type-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
}

.stat-value {
  font-weight: bold;
  color: #1e3c72;
}

.card-actions {
  display: flex;
  gap: 10px;
}

.detail-btn,
.report-btn {
  padding: 6px 12px;
  border: 1px solid #1e3c72;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.detail-btn {
  background: #1e3c72;
  color: white;
}

.detail-btn:hover {
  background: #2a5298;
}

.report-btn {
  background: white;
  color: #1e3c72;
}

.report-btn:hover {
  background: #f8f9ff;
}

.identification-stats {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.identification-stats h3 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  background: #f8f9ff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.stat-header h4 {
  color: #333;
  margin: 0;
}

.stat-icon {
  font-size: 24px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 10px;
}

.stat-trend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 14px;
  color: #666;
}

.trend-icon {
  font-size: 16px;
}

.recent-identifications {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.recent-identifications h3 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.records-table {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

.table-header {
  display: grid;
  grid-template-columns: 80px 80px 200px 120px 100px 80px;
  background: #f8f9ff;
  border-bottom: 1px solid #f0f0f0;
}

.header-cell {
  padding: 12px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.table-body {
  display: grid;
  gap: 1px;
  background: #f0f0f0;
}

.table-row {
  display: grid;
  grid-template-columns: 80px 80px 200px 120px 100px 80px;
  background: white;
  align-items: center;
}

.table-cell {
  padding: 12px;
  text-align: center;
  font-size: 14px;
}

.type-tag {
  background: #1e3c72;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.result-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.result-icon {
  font-size: 16px;
}

.result-name {
  font-size: 12px;
  color: #333;
}

.confidence-bar {
  position: relative;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3c72, #2a5298);
  transition: width 0.3s ease;
}

.confidence-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: white;
  mix-blend-mode: difference;
}

.view-record-btn {
  background: #1e3c72;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.view-record-btn:hover {
  background: #2a5298;
}

.fraud-trends {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.fraud-trends h3 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.trends-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}

.trend-chart {
  background: #f8f9ff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.trend-insights h4 {
  color: #333;
  margin-bottom: 15px;
}

.insight-list {
  display: grid;
  gap: 15px;
}

.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px;
  background: #f8f9ff;
  border-radius: 8px;
}

.insight-icon {
  font-size: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.insight-content h5 {
  color: #333;
  margin: 0 0 5px 0;
  font-size: 14px;
}

.insight-content p {
  color: #666;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .fraud-identification {
    padding: 10px;
  }
  
  .identify-panel {
    grid-template-columns: 1fr;
  }
  
  .library-filters {
    flex-direction: column;
    gap: 10px;
  }
  
  .fraud-types-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .table-header,
  .table-row {
    grid-template-columns: 1fr;
  }
  
  .trends-content {
    grid-template-columns: 1fr;
  }
}
</style> 